---
title: Astro에서 Bun 사용하기
description: Astro로 만든 사이트에서 Bun을 사용하는 방법을 배워보세요.
type: recipe
i18nReady: true
---

[Bun](https://bun.sh/)은 올인원 JavaScript 런타임 및 툴킷입니다. 더 많은 내용은 [Bun 공식 문서](https://bun.sh/docs)를 참고하세요.

:::caution
Bun은 최근 첫 번째 안정적인 버전을 출시했습니다. 그러나 Bun을 Astro와 함께 사용하면, 일부 통합이 예상대로 동작하지 않을 수 있습니다. 자세한 내용은 [Astro와 함께 사용하는 방법에 대한 Bun 공식 문서](https://bun.sh/guides/ecosystem/astro)를 참고하세요.

Bun을 사용하면서 문제를 발견했다면, [Github의 Bun 공식 저장소에서 issue를 생성해주세요.](https://github.com/oven-sh/bun/issues/new/choose)
:::

## 요구사항

- Bun이 로컬 환경에 설치되어 있어야 합니다. Bun 공식 문서의 [설치하기](https://bun.sh/docs/installation)를 참고하세요.

## Bun으로 새로운 Astro 프로젝트 생성

다음과 같이 `create-astro` 명령어를 사용하여 Bun이 포함된 새 Astro 프로젝트를 생성하세요. 

```bash
bunx create-astro@latest my-astro-project-using-bun
```
:::tip 
또한 `--template` 플래그를 사용하여, [기존에 존재하던 다른 Astro Github 저장소로부터 새 Astro 프로젝트를 생성할 수도 있습니다.](/ko/install/auto/#시작-템플릿)
```bash
bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal
```
:::

## 종속성 설치

`bunx create-astro` 명령어로 프로젝트를 시작하는 경우, CLI는 Bun을 사용해 자동으로 종속성을 설치하므로 이 단계를 건너뛸 수 있습니다.

그렇지 않은 경우 Bun을 사용하여 종속성을 설치해야 합니다. 

```bash
bun install
```

## 타입 추가

Bun은 [`@types/bun`](https://www.npmjs.com/package/@types/bun) 패키지를 제공하며, 이 패키지에는 Bun의 런타임 타입이 포함되어 있습니다.

다음 명령어로 `@types/bun`를 설치합니다.

```sh
bun add -d @types/bun
```

## Astro 통합 사용

`astro add` 명령어로 공식 Astro 통합을 추가할 수 있습니다.


```bash
bunx astro add react
```

## Bun으로 Astro 실행

:::note
Node 대신 Bun의 자체 런타임을 사용하려면, 모든 `astro` 명령어 앞에 [`--bun` CLI 플래그](https://bun.sh/docs/cli/bunx#shebangs)를 사용하세요.
:::

### 개발 서버 실행

Bun을 런타임으로 사용하여 개발 서버를 실행하려면 다음 명령어를 사용합니다.

```bash
bunx --bun astro dev
```

### Bun으로 사이트 빌드

Bun을 런타임으로 사용하여 사이트를 빌드하려면 다음 명령어를 사용합니다.

```bash
bunx --bun astro build
```

Astro는 `dist/` 디렉터리에 빌드 결과를 생성합니다. 그러면 `preview` 명령어를 사용하여 사이트를 제공할 수 있습니다.

```bash
bunx --bun astro preview
```

## `@astrojs/node`를 사용하여 Bun으로 SSR 추가

Bun은 [Node.js API 호환성](https://bun.sh/docs/runtime/nodejs-apis)을 제공합니다. [`@astrojs/node`](/ko/guides/integrations-guide/node/) 어댑터를 사용하면, Node 대신 Bun의 런타임으로 [서버 측 렌더링](/ko/guides/server-side-rendering/)을 추가할 수 있습니다.

다음 명령어를 사용하여 Astro 프로젝트에 Node.js 어댑터를 추가합니다.

```bash
bunx astro add node
```

위에서 사용한 빌드 명령어를 다시 사용하여 사이트를 다시 빌드합니다. 

```bash
bunx --bun astro build
```

마지막으로, 빌드된 사이트를 실행하기 위해 다음 명령어를 사용합니다. 

```bash
bun ./dist/server/entry.mjs
```

## Bun에서 테스트하기

Bun은 `bun test` 명령을 통해 실행할 수 있는 빠르고 Jest와 호환되는 내장 테스트 실행기를 제공합니다. 이를 사용하려면 [`bun 테스트` 문서](https://bun.sh/docs/cli/test)를 읽어보세요.

그러나 웹 앱 테스트에 대한 현대적인 접근 방식을 위해 Cypress 또는 Playwright를 사용하는 것도 가능합니다.

### Cypress

Cypress는 프런트엔드 테스트 도구이며 "즐거운 테스트 경험을 만들고 개발자의 행복을 창출하는 것"을 사명으로 삼고 있습니다. 이를 통해 Astro 사이트에 대한 end-to-end 테스트를 작성할 수 있습니다.

다음 명령어를 사용하여 Cypress를 설치합니다.

```bash
bun add cypress --dev
```

나머지 구성을 알아보고 첫 번째 테스트를 시작하려면 [Astro 테스트 안내서](/ko/guides/testing/#구성)의 Cypress 프로세스를 따르세요.

### Playwright

Playwright는 Chromium, WebKit 및 Firefox를 포함한 모든 최신 렌더링 엔진에서 Astro 코드를 테스트할 수 있는 end-to-end 테스트 프레임워크입니다.

다음 명령어를 사용하여 Playwright를 설치합니다.

```bash
bun create playwright
```

첫 번째 Playwright 테스트를 생성하려면 [Astro 테스트 안내서](/ko/guides/testing/#첫-playwright-테스트-생성)의 Playwright 프로세스에 대한 지침을 따르세요.

## 공식 자료

- [Astro와 Bun을 사용하여 앱 빌드](https://bun.sh/guides/ecosystem/astro)

## 커뮤니티 자료

Astro와 함께 Bun을 사용하고 계신가요? 이 페이지에 여러분의 블로그 게시물이나 동영상을 추가하세요!  

- [Bun을 사용하여 Cloudflare Pages 사이트 빌드](https://blog.otterlord.dev/posts/hello-from-bun/) - 블로그 게시물
